import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import {Button} from "react-vant"
import {useNavigate} from "react-router-dom"
import { Dialog } from 'react-vant';
import * as action from "../action"
function Address() {
  let navgite =  useNavigate()
   let dispatch = useDispatch()
   let store = useSelector(state=>({...state.shopreducer}))
   console.log(store);
   const goAddress = (isaddress)=> {
         navgite("/addaddress",{
             state:{
                isadd:"新增"
             }
         })
   }
   const delfn = (index)=>{
    Dialog.confirm({
        message: '您确定要删除吗',
      })
        .then(() => {
          console.log('confirm')
          dispatch(action.delfnarress(index))
        })
        .catch(() => {
          console.log('catch')
        })
   }
   const editfn = (item,index)=>{
        console.log(item,index);
        navgite("/addaddress",{
            state:{
                item,index,
                isadd:"编辑"
            }
        })
   }
  return (
    <div>
        {
           store.addressarr &&   store.addressarr.length ?  store.addressarr.map((item,index)=>{
                return <div key={index} style={{borderBottom:"1px solid #ccc"}}>
                    <li>姓名：{item.name}</li>
                    <li>住址：{item.address}</li>
                    <li>电话：{item.phone} <Button onClick={()=>{delfn(index)}}>删除</Button><Button onClick={()=>{editfn(item,index)}}>编辑</Button></li>
                    
                </div>
           }):"暂无数据"

        }
         <Button round type='info' onClick={()=>{
             goAddress("新增")
         }}>新增地址</Button>
    </div>
  )
}

export default Address